<!--
  Hello!
  -
  Simplefolio is a clean and responsive portfolio template for Developers!
  Created by Jacobo Martinez.
  -
  Github Repo: https://github.com/cobiwave/simplefolio/
  Readme: https://github.com/cobiwave/simplefolio/README.md
  -
  For business & inquires, contact me -> jacobojavier98@gmail.com
-->
<!DOCTYPE html>
<html lang="en" class="sr">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/png" href="assets/favicon.png" />

    <!-- Todo: put here your site title -->
    <title>[Your name here] | Developer</title>
    <!-- Todo: add some coding keywords below - e.g: (javascript, yourusername, etc) -->
    <meta name="keywords" content="[username], [name], skill" />
    <!-- Todo: improve your SEO by adding a small description of you -->
    <meta name="description" content="[Your name here] | Developer" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="styles.scss" />
    <script
      defer
      src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"
    ></script>

    <!-- Todo: remove the below script once you finish your portfolio -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </head>

  <!-- Todo: read the following HTML Todos to create your stunning portfolio website -->
  <body>
    <div id="top"></div>

    <!-- **** Hero Section **** -->
    <section id="hero" class="jumbotron">
      <div class="container">
        <h1 class="hero-title load-hidden">
          Hi, my name is <span class="text-color-main">Chris Zhong</span>
          <br />
          I'm the Unknown Developer.
        </h1>
        <p class="hero-cta load-hidden">
          <a rel="noreferrer" class="cta-btn cta-btn--hero" href="#about"
            >Know more</a
          >
        </p>
      </div>
    </section>
    <!-- /END Hero Section -->

    <!-- **** About Section **** -->
    <section id="about">
      <div class="container">
        <h2 class="section-title load-hidden">About me</h2>
        <div class="row about-wrapper">
          <div class="col-md-6 col-sm-12">
            <div class="about-wrapper__image load-hidden">
              <img
                alt="Profile Image"
                class="img-fluid rounded shadow-lg"
                height="auto"
                width="300px"
                src="assets/profile.jpg"
                alt="Profile Image"
              />
            </div>
          </div>
          <div class="col-md-6 col-sm-12">
            <div class="about-wrapper__info load-hidden">
              <p class="about-wrapper__info-text">
                This is where you can describe about yourself. The more you
                describe about yourself, the more chances you have!
              </p>
              <p class="about-wrapper__info-text">
                Extra Information about you! like hobbies and your goals.
              </p>
              <span class="d-flex mt-3">
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn cta-btn--resume"
                  href="assets/resume.pdf"
                >
                  View Resume
                </a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /END About Section -->

    <!-- **** Projects Section **** -->
    <section id="projects">
      <div class="container">
        <div class="project-wrapper">
          <h2 class="section-title dark-blue-text">Projects</h2>

          <!-- Notice: each .row is a project -->
          <div class="row">
            <div class="col-lg-4 col-sm-12">
              <div class="project-wrapper__text load-hidden">
                <h3 class="project-wrapper__text-title">Project Title 0</h3>
                <div>
                  <p class="mb-4">
                    Describe the project being very specific, you can use the Twitter standard: no more than 280 characters: 
                    complement the information: the skills learned or reinforced in its realization and how you faced it, 
                    prove to be proactive in the search for solutions.
                  </p>
                </div>
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn cta-btn--hero"
                  href="#!"
                >
                  See Live
                </a>
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn text-color-main"
                  href="#!"
                >
                  Source Code
                </a>
              </div>
            </div>
            <div class="col-lg-8 col-sm-12">
              <div class="project-wrapper__image load-hidden">
                <a rel="noreferrer" href="#!" target="_blank">
                  <div
                    data-tilt
                    data-tilt-max="4"
                    data-tilt-glare="true"
                    data-tilt-max-glare="0.5"
                    class="thumbnail rounded js-tilt"
                  >
                    <img
                      alt="Project Image"
                      class="img-fluid"
                      src="assets/project.jpg"
                    />
                  </div>
                </a>
              </div>
            </div>
          </div>
          <!-- /END Project -->

          <!-- Notice: each .row is a project -->
          <div class="row">
            <div class="col-lg-4 col-sm-12">
              <div class="project-wrapper__text load-hidden">
                <h3 class="project-wrapper__text-title">Project Title 1</h3>
                <div>
                  <p class="mb-4">
                    Demonstrate in this description the skills of a programmer: such as having commitment, 
                    having perseverance and accepting alternative solutions. Remember that being a portfolio you are not selling the project, 
                    you are selling yourself, it reflects the resources used: Frameworks, libraries, platforms, etc.
                  </p>
                </div>
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn cta-btn--hero"
                  href="#!"
                >
                  See Live
                </a>
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn text-color-main"
                  href="#!"
                >
                  Source Code
                </a>
              </div>
            </div>
            <div class="col-lg-8 col-sm-12">
              <div class="project-wrapper__image load-hidden">
                <a rel="noreferrer" href="#!" target="_blank">
                  <div
                    data-tilt
                    data-tilt-max="4"
                    data-tilt-glare="true"
                    data-tilt-max-glare="0.5"
                    class="thumbnail rounded js-tilt"
                  >
                    <img
                      alt="Project Image"
                      class="img-fluid"
                      src="assets/project.jpg"
                    />
                  </div>
                </a>
              </div>
            </div>
          </div>
          <!-- /END Project -->

          <!-- Notice: each .row is a project -->
          <div class="row">
            <div class="col-lg-4 col-sm-12">
              <div class="project-wrapper__text load-hidden">
                <h3 class="project-wrapper__text-title">Project Title 2</h3>
                <div>
                  <p class="mb-4">
                    If the project was collaborative, reflect it in this description, that will demonstrate communication and/or leadership skills. 
                    Additionally, if you made use of the mastery of a second language, it will reflect on you professionalism.
                  </p>
                </div>
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn cta-btn--hero"
                  href="#!"
                >
                  See Live
                </a>
                <a
                  rel="noreferrer"
                  target="_blank"
                  class="cta-btn text-color-main"
                  href="#!"
                >
                  Source Code
                </a>
              </div>
            </div>
            <div class="col-lg-8 col-sm-12">
              <div class="project-wrapper__image load-hidden">
                <a rel="noreferrer" href="#!" target="_blank">
                  <div
                    data-tilt
                    data-tilt-max="4"
                    data-tilt-glare="true"
                    data-tilt-max-glare="0.5"
                    class="thumbnail rounded js-tilt"
                  >
                    <img
                      alt="Project Image"
                      class="img-fluid"
                      src="assets/project.jpg"
                    />
                  </div>
                </a>
              </div>
            </div>
          </div>
          <!-- /END Project -->
        </div>
      </div>
    </section>
    <!-- /END Projects Section -->

    <!-- **** Contact Section **** -->
    <section id="contact">
      <div class="container">
        <h2 class="section-title">Contact</h2>
        <div class="contact-wrapper load-hidden">
          <p class="contact-wrapper__text">[Put your call to action here]</p>
          <a
            rel="noreferrer"
            target="_blank"
            class="cta-btn cta-btn--resume"
            href="mailto:example@email.com"
            >Call to Action</a
          >
        </div>
      </div>
    </section>
    <!-- /END Contact Section -->

    <!-- **** Footer Section **** -->
    <footer class="footer navbar-static-bottom">
      <div class="container">
        <a rel="noreferrer" href="#top" class="back-to-top">
          <i class="fa fa-angle-up fa-2x" aria-hidden="true"></i>
        </a>
        <div class="social-links">
          <a rel="noreferrer" href="#!" target="_blank">
            <i class="fa fa-twitter fa-inverse"></i>
          </a>
          <a rel="noreferrer" href="#!" target="_blank">
            <i class="fa fa-linkedin fa-inverse"></i>
          </a>
          <a rel="noreferrer" href="#!" target="_blank">
            <i class="fa fa-github fa-inverse"></i>
          </a>
        </div>

        <hr />

        <!-- Notice: if you want to give me some credit, it will be huge for me! if not, put your data on it -->
        <p class="footer__text">
          © 2021 - Template developed by
          <a rel="noreferrer" href="https://github.com/cobiwave" target="_blank"
            >Jacobo Martínez</a
          >
        </p>

        <!-- TO DO: remove this entire paragraph once you finish your portfolio -->
        <p class="mt-3 pt-3">
          <a
            rel="noreferrer"
            class="github-button"
            href="https://github.com/cobiwave/simplefolio/fork"
            data-icon="octicon-repo-forked"
            data-size="large"
            data-show-count="true"
            aria-label="Fork ntkme/github-buttons on GitHub"
            >Fork</a
          >
          <a
            rel="noreferrer" 
            class="github-button"
            href="https://github.com/cobiwave/simplefolio"
            data-icon="octicon-star"
            data-size="large"
            data-show-count="true"
            aria-label="Star cobiwave/simplefolio on GitHub"
            >Star</a
          >
        </p>
      </div>
    </footer>
    <!-- /END Footer Section -->

    <script defer type="module" src="index.js"></script>
  </body>
</html>
